:host {
  @apply flex flex-col relative;
}

.ngm-kpi--loading {
  position: absolute;
}

.ngm-kpi--value {
  white-space: nowrap;
  align-items: baseline;
}

.ngm-kpi--trend {
  padding-top: 0.5rem;

  .ngm-kpi-reference,
  .ngm-kpi-deviation {
    font-size: 0.75rem;
  }
}

.ngm-kpi--data-point {
  flex: 1;
  display: flex;
  flex-direction: column;
  place-content: center;
  align-items: flex-start;
}

:host.ngm-kpi--flex-row {
  .ngm-kpi--kpi {
    flex: 2 1 100%;
  }
  .ngm-kpi--additional {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.ngm-kpi--additional {
  display: flex;
  flex: 1 1 100%;
  flex-direction: row;
}

.ngm-kpi__intent {
  @apply cursor-pointer hover:underline;
}
